<template>
    <el-container>
        <el-container style="height: 520px">
            <el-header>
                <el-form
                    inline
                    label-width="49px"
                    :model="queryList"
                    style="margin-top: 5px; width: 100%"
                >
                    <el-input
                        placeholder="---请输入收货单号---"
                        v-model="queryList.taskOrderCode"
                        style="width: 180px"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入物料名称---"
                        v-model="queryList.materialName"
                        style="width: 180px"
                    />&nbsp;
                    <el-input
                        placeholder="---请输入物料单位---"
                        v-model="queryList.unitName"
                        style="width: 180px"
                    />&nbsp;
                    
                    
                    <el-button type="primary" @click="$refs.mytable.getData()">查询</el-button>
                </el-form>
            </el-header>
            <el-foot>
                <scTable
                    ref="mytable"
                    :queryType="queryType"
                    :data="listData"
                    :queryList="queryList"
                    :column="columnList"
                    :orderList="OrderList"
                    :sort-orders="['ascending', 'descending']"
                    @selection-change="selectionChange"
                    row-key="ApplyOrderItemId"
                    key="ApplyOrderItemId"
                    stripe
                    show-summary
                    remoteSummary
                    style="height: 450px; min-width: 420"
                >
                    <el-table-column type="selection" width="50" :selectable="selectable"></el-table-column>
                    <el-table-column label="收货单号" prop="taskOrderCode" width="150" sortable></el-table-column>
                    <el-table-column label="供货单位" prop="supplierName" width="150" sortable></el-table-column>
                    <el-table-column label="物料编码" prop="materialCode" width="120" sortable></el-table-column>
                    <el-table-column label="物料名称" prop="materialName" width="250" sortable></el-table-column>
                    <el-table-column label="单位编码" prop="unitCode" width="100" ></el-table-column>
                    <el-table-column label="单位名称" prop="unitName" width="100" ></el-table-column>
                    <el-table-column label="价格" prop="price" width="100" ></el-table-column>
                    <el-table-column label="可申请数量" prop="canUseQty" width="120" ></el-table-column>
                    <el-table-column label="物料分类" prop="materialTypeName" width="100" ></el-table-column>
                    <el-table-column label="收货时间" prop="taskDate" width="180" sortable></el-table-column>
                </scTable>
            </el-foot>
        </el-container>
    </el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
export default {
    name: "typelist",
    components: {
        publicjs,
    },
    props: {
        queryType: { type: String, default: "task-order/item-pages" },
        defaultQueryList: { type: Object, default: {} }
    },
    data() {
        return {
            selectionRows: [],
            selection: [],
            pkList: [],
            attrList: {},
            valueList: {},
            queryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
           
        };
    },
    methods: {
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection
            console.log(selection,'selection')
            // this.$nextTick(() => {
            //     const newSelection = new Set([...this.selectionRows, ...selection]);
            //     this.selectionRows = Array.from(newSelection); // 转换回数组形式
            // });
        },
        selectable(row){
            if(row.canUseQty<=0) return false;
            return true;
        },
        async opBindData() {
            this.queryList = { ...this.queryList,...this.defaultQueryList };
            this.$nextTick(() => {
                this.$refs.mytable.getData();
            });
        },
        
    },
    async mounted() {
        await this.opBindData();
    },
};
</script>
